<template>
  <div class="dv-border-box-2" ref="borderBox2">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <polygon :fill="backgroundColor" :points="`
        7, 7 ${width - 7}, 7 ${width - 7}, ${height - 7} 7, ${height - 7}
      `"/>

      <polyline
          :stroke="mergedColor[0]"
          :points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`"
      />
      <polyline
          :stroke="mergedColor[1]"
          :points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`"
      />
      <circle :fill="mergedColor[0]" cx="11" cy="11" r="1"/>
      <circle :fill="mergedColor[0]" :cx="width - 11" cy="11" r="1"/>
      <circle :fill="mergedColor[0]" :cx="width - 11" :cy="height - 11" r="1"/>
      <circle :fill="mergedColor[0]" cx="11" :cy="height - 11" r="1"/>
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { cloneDeep, debounce, mergeDeep } from "../../../../utils/utils";
import { defineComponent, onMounted, ref, watch } from "vue";

export default defineComponent({
  name: "DvBorderBox2",
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: "transparent"
    }
  },
  setup(props) {
    const borderBox2 = ref(null);
    const defaultColor = ref(["#fff", "rgba(255, 255, 255, 0.6)"]);
    const mergedColor = ref([]);
    const width = ref(300);
    const height = ref(300);
    const mergeColor = () => {
      mergedColor.value = mergeDeep(cloneDeep(defaultColor.value), props.color || []);
    };
    watch(() => props.color, s => {
      mergeColor();
    });
    onMounted(() => {
      const ro = new ResizeObserver(entries => {
        handleResize(entries);
      });
      ro.observe(borderBox2.value);
      mergeColor();
    });
    const handleResize = debounce((entries) => {
      width.value = entries[0].contentRect.width;
      height.value = entries[0].contentRect.height;
    }, 100);
    return {
      borderBox2,
      defaultColor,
      mergedColor,
      mergeColor,
      width,
      height,
      handleResize
    };
  },
});
</script>

<style scoped>
.dv-border-box-2 {
  position: relative;
  width: 100%;
  height: 100%;
}

.dv-border-box-2 .dv-border-svg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.dv-border-box-2 .dv-border-svg-container > polyline {
  fill: none;
  stroke-width: 1;
}

.dv-border-box-2 .border-box-content {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
